{% extends 'base.html' %}
{% load static %}
{% block title %}用户管理 - 角色管理{% endblock %}
{% block content %}
    <style type="text/css">
        *{box-sizing: border-box}
    </style>
    <!-- 内容标题栏 -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-12">
            <h1 class="m-0 text-dark">用户角色管理</h1>
          </div><!-- /.col -->
          <div class="col-sm-12">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/">首页</a></li>
              <li class="breadcrumb-item active">系统管理</li>
                <li class="breadcrumb-item active"><a href=>用户角色管理</a></li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /内容标题栏 -->
<section class="content">
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="card card-secondary">
                <div class="card-header">
                    <h3 class="card-title">基于用户角色的权限管理</h3>
                </div>
                <div class="card-body">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label" style="color: #007bff;text-align: right;">用户角色:</label>
                                    <div class="col-sm-8">
                                        <input class="form-control" id="new_role">
                                    </div>
                                    <div class="col-sm-2">
                                        <button id="role_submit" onclick="addNewRole('add','')" class="btn btn-success">新增</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <table class="table table-striped">
                                    <thead>
                                    <tr style="text-align: center;">
                                        <th style="width: 60px;">序号</th>
                                        <th>角色名称</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                        {% for j in data %}
                                        <tr style="text-align: center;">
                                            <td style="vertical-align: middle;">{{ forloop.counter }}</td>
                                            <td style="vertical-align: middle;">{{ j.name }}</td>
                                            <td style="vertical-align: middle;">
                                                <a onclick="ChangRole({{ j.id }})" title="编辑" style="color: #007bff;"><i class="fas fa-edit"> 编辑</i> </a>
                                                丨
                                                <a onclick="before_del({{ j.id }},{{ j.name }})" title="删除" style="color: red;"><i class="fas fa-times"> 删除</i></a>
                                                丨
                                                <a href="{% url 'login:permission' 'role' j.id %}" style="color: #00b44e;"><i class="fas fa-wrench"> 权限设置</i></a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                </div>
            </div>
        </div>
    </div>
</div>
</section>
{% block custom_js %}
<script type="text/javascript">
// ajax提交
    $.ajaxSetup({
        data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
    });
    //添加新角色
    function addNewRole(type_,id_){
        $.ajax({
            url: '{% url 'login:role' %}',
            type: 'POST',
            data: {
                'type': type_,
                'new_role': $("#new_role").val(),
                // 删除操作用到的
                'role_id': id_,
            },
            //请求成功后执行提醒
            success: function (data) {
                layui.use('layer',function () {
                    var layer=layui.layer;
                    layer.msg(data.info, function(){
                        //刷新页面
                        window.location.reload()
                    });
                })
            }
        })
    }
    //弹窗修改
    function ChangRole(id_){
        layui.use('layer', function () {
            var layer=layui.layer;
            layer.open({
                type: 2,   //1是静态内容层，2是iframe层，可用连接
                area: ['600px', '400px'],
                title: '修改角色名称',
                maxmin: true,
                content:"{% url 'login:role' %}" + '?id=' + id_,
                end: function () {
                    location.reload() //弹窗完成后，重载父页面
                }
            })
        })
    }
</script>
<script type="text/javascript">
    // ajax提交
    $.ajaxSetup({
        data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
    });
    //删除前询问
    function before_del(tem_id,name) {
        layui.use('layer',function () {
            var layer = layui.layer;
            layer.open({
                type: 1,
                offset: 'auto',
                btn: ['确定','取消'],
                btnAlign: 'c',
                content: '<div style="padding: 20px 80px; color: red;">'+'是否删除角色--> '+ name +' <--?</div>',
                shade: 0,
                title: '删除确认',
                yes: function () {
                    del_template(tem_id)
                },
                btn2: function () {
                    layer.msg('您取消了操作！')
                }
            })
        })
    }
   //删除
   function del_template(id_) {
        $.ajax({
            url: '{% url 'login:role' %}',
            type: 'POST',
            data: {
                'type': "del",
                'new_role': $("#new_role").val(),
                // 删除操作用到的
                'role_id': id_,
            },
            async: false,
            success: function (data) {
                if(data.status === 1){
                    //操作成功
                    layui.use('layer',function () {
                        var layer=layui.layer;
                        info = data.info
                        layer.alert(info,{
                            icon: 6,
                            skin: 'layer-ext-moon',
                            yes: function () {
                                window.location.reload();
                            }
                        })
                    })
                }else {
                    //操作失败
                    layui.use('layer',function () {
                        var layer=layui.layer;
                        info = data.info
                        layer.alert(info,{
                            icon: 0,
                            skin: 'layer-ext-moon',
                            yes: function () {
                                layer.closeAll()
                            }
                        })
                    })
            }
        }
    });
   }
</script>
{% endblock %}
{% endblock %}
